<template>
  <el-dialog
    v-model="dialogVisible"
    v-bind="$attrs"
    title="地址选择"
    width="600px"
    @opened="opened"
  >
    <div style="position: relative">
      <div id="map" class="map" style="width: 560px; height: 560px"></div>
      <el-input
        id="City"
        v-model="city"
        class="city"
        placeholder="请输入内容"
        style="position: absolute; top: 20px; left: 20px"
        @keydown.enter="dtczbtnssfn"
      />
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setdatafn">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
  import markerimg from '@/assets/img/dz.png'
  export default {
    name: 'ZmapBox',
    props: {
      data: {
        type: Object,
        default: () => {
          return {}
        },
      },
      item: {
        type: Object,
        default: () => {
          return {}
        },
      },
      rank: { type: Number, default: 15 },
    },
    data() {
      return {
        map: '',
        marker: '',
        city: '',
        myGeo: new BMap.Geocoder(),
        ssfwcity: '中国',
        dz: '',
        ac: '',
        mpt: '',
        dialogVisible: false,
        setfn: () => {},
      }
    },
    mounted() {},
    methods: {
      setdatafn() {
        this.dialogVisible = false
        if (!this.marker) {
          return ''
        }
        // {{ dz }} mpt
        let data = { dz: this.dz, mpt: this.mptfn() }
        this.setfn(data)
      },
      show(callback) {
        this.dialogVisible = true
        this.setfn = callback
      },
      async opened() {
        // 百度地图API功能
        this.map = new BMap.Map('map', { enableMapClick: false })
        let mpt = this.data[this.item.mptvalue]
        let getGetMappt = await this.$store.dispatch('mpt/getGetMappt')
        mpt = mpt ? mpt : getGetMappt.mpt

        mpt = mpt.replace('POINT(', '')
        mpt = mpt.replace(')', '')
        mpt = mpt.split(' ')
        let rank = this.rank ? this.rank : getGetMappt.rank
        var point = new BMap.Point(mpt[0], mpt[1])
        this.map.centerAndZoom(point, rank)
        this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
        this.marker = new BMap.Marker(new BMap.Point(mpt[0], mpt[1]), {
          icon: new BMap.Icon(markerimg, new BMap.Size(32, 32)),
        })
        this.marker.enableDragging()
        this.marker.disableMassClear()
        this.map.addOverlay(this.marker)
        this.marker.addEventListener('mouseup', () => {
          this.mcdzmapmarkerfn()
        })
        this.map.addEventListener('click', (e) => {
          this.marker.setPosition(e.point)
          this.mcdzmapmarkerfn()
        })

        this.ac = new BMap.Autocomplete({
          //建立一个自动完成的对象
          input: 'City',
          location: this.map,
          onSearchComplete: function () {},
        })
        this.ac.addEventListener('onconfirm', (e) => {
          //鼠标点击下拉列表后的事件
          var v = e['item']['value']
          var text = v['city'] + v['district']
          var _value = e.item.value
          var myValue =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business
          console.log(this.ssfwcity, text)
          // this.ssfwcity = text
          if (text == '' || text.indexOf(v['business']) >= 0) {
            this.ssfwcity = v['business']
            this.Boundaryfn(v['business'])
            this.eventonconfirm(myValue, true)
          } else {
            this.eventonconfirm(myValue)
          }
        })
      },
      dtczbtnssfn(city, cityflag) {
        this.ac.setLocation(this.ssfwcity, 12)
        if (!cityflag) {
          this.map.clearOverlays()
        }
        this.myGeo.getPoint(
          city,
          (point) => {
            if (point) {
              if (!cityflag) {
                if (this.map.getZoom() < 17) {
                  this.map.setZoom(17)
                }
                this.map.panTo(point)
              }
              this.marker.setPosition(point)
              this.mcdzmapmarkerfn()
            } else {
              this.map.panTo(this.marker.point)
              alert('您选择地址没有解析到结果!')
            }
          },
          this.ssfwcity
        )
      },
      mcdzmapmarkerfn() {
        var pt = this.marker.point
        this.myGeo.getLocation(pt, (result) => {
          if (result.surroundingPois.length > 0) {
            this.dz = result.surroundingPois[0].address
          }
        })
      },
      Boundaryfn(city) {
        this.map.clearOverlays()
        new this.BMap.Boundary().get(city, function (rs) {
          var count = rs.boundaries.length
          //建立多边形覆盖物
          if (count == 1) {
            var ply = new BMap.Polygon(rs.boundaries[0], {
              strokeWeight: 2,
              strokeOpacity: 0.8,
              StrokeStyle: 'solid',
              strokeColor: '#1abc9c',
              fillColor: '#16a085',
              fillOpacity: 0.2,
            })
            this.map.addOverlay(ply) //添加覆盖物
            this.map.setViewport(ply.getPath()) //调整视野
          }
        })
      },
      eventonconfirm(city, cityflag) {
        let local = new BMap.LocalSearch(this.map, {
          //智能搜索
          onSearchComplete: () => {
            this.dz = local.getResults().getPoi(0).address
            var point = local.getResults().getPoi(0).point //获取第一个智能搜索的结果
            if (!cityflag) {
              if (this.map.getZoom() < 17) {
                this.map.setZoom(17)
              }
              this.map.panTo(point)
            }
            this.marker.setPosition(point)
          },
        })
        local.search(city)
      },

      mptfn() {
        if (!this.marker) {
          return ''
        }
        return `POINT(${this.marker.point.lng} ${this.marker.point.lat})`
      },
      // dz
    },
  }
</script>
<style lang="scss" scope>
  #City {
    width: 200px;
  }
  // 移除左下角百度地图版权

  .BMap_cpyCtrl.BMap_noprint.anchorBL {
    display: none;
  }

  // 移除左下角百度地图logo

  .anchorBL {
    display: none;
  }

  // 移除左下角百度地图版权

  .BMap_cpyCtrl.BMap_noprint.anchorBL {
    display: none;
  }

  // 移除左下角百度地图logo

  .anchorBL {
    display: none;
  }

  .tangram-suggestion-main {
    z-index: 9999;
  }
</style>
